console.log("homework 1")


    //绘制
    const canvas = document.getElementById('test1');
    const context = canvas.getContext('2d');

function littleYellowMan(){
    //设置线宽
    context.lineWidth = 2;
    context.lineJoin = "round";


    /*暂时不会搞的眼球颜色
    var gradient = ctx.createRadialGradient(160,150,20,160,150,0);
    gradient.addColorStop(0,"white");
    gradient.addColorStop(1,"orange");
    ctx.fillStyle = gradient;
    ctx.fillRect(140,130,40,40);
    
    var gradient = ctx.createRadialGradient(260,150,20,260,150,0);
    gradient.addColorStop(0,"white");
    gradient.addColorStop(1,"orange");
    ctx.fillStyle = gradient;
    ctx.fillRect(240,130,40,40);
    */


    //眼镜
    context.beginPath();
    context.arc(150, 150, 50, 0, 2 * Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(270, 150, 50, 0, 2 * Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(150, 150, 70, 0.55, 1.83 * Math.PI);
    context.stroke();

    context.beginPath();
    context.arc(270, 150, 70, 2.6, 1.17 * Math.PI, true);
    context.stroke();


    //眼睛
    context.fillStyle = 'black';
    context.beginPath();
    context.arc(160, 150, 20, 0, 2 * Math.PI);
    context.stroke();
    context.fill();

    context.beginPath();
    context.arc(260, 150, 20, 0, 2 * Math.PI);
    context.stroke();
    context.fill();

    context.fillStyle = 'white';
    context.beginPath();
    context.arc(155, 145, 3, 0, 2 * Math.PI);
    context.stroke();
    context.fill();

    context.fillStyle = 'white';
    context.beginPath();
    context.arc(255, 145, 3, 0, 2 * Math.PI);
    context.stroke();
    context.fill();


    //身体
    context.beginPath();
    context.moveTo(150, 80);
    context.bezierCurveTo(190, 65, 230, 65, 270, 80);
    context.stroke();

    context.beginPath();
    context.moveTo(87, 120);
    context.bezierCurveTo(65, 170, 60, 220, 60, 260);
    context.stroke();

    context.beginPath();
    context.moveTo(333, 120);
    context.bezierCurveTo(355, 170, 360, 220, 360, 260);
    context.stroke();

    context.beginPath();
    context.moveTo(70, 170);
    context.lineTo(85, 172);
    context.stroke();

    context.beginPath();
    context.moveTo(350, 170);
    context.lineTo(335, 172);
    context.stroke();

    context.beginPath();
    context.moveTo(165, 250);
    context.bezierCurveTo(220, 250, 260, 240, 280, 230);
    context.bezierCurveTo(300, 300, 170, 310, 165, 250);
    context.stroke();


    //衣服
    context.beginPath();
    context.moveTo(55, 360);
    context.lineTo(120, 360);
    context.lineTo(120, 300);
    context.lineTo(300, 300);
    context.lineTo(300, 360);
    context.lineTo(365, 360);
    context.bezierCurveTo(365, 420, 265, 420, 270, 450);
    context.lineTo(213, 450);
    context.lineTo(213, 430);
    context.lineTo(207, 430);
    context.lineTo(207, 450);
    context.lineTo(150, 450);
    context.bezierCurveTo(155, 420, 55, 420, 55, 360);
    context.stroke();
    context.fillStyle = 'gray';
    context.fill();

    context.beginPath();
    context.moveTo(54, 260);
    context.bezierCurveTo(80, 260, 120, 280, 145, 310);
    context.lineTo(130, 330);
    context.bezierCurveTo(120, 320, 80, 285, 52, 285);
    context.lineTo(54, 260);
    context.stroke();
    context.fillStyle = 'gray';
    context.fill();

    context.beginPath();
    context.moveTo(366, 260);
    context.bezierCurveTo(340, 260, 300, 280, 275, 310);
    context.lineTo(290, 330);
    context.bezierCurveTo(300, 320, 340, 285, 368, 285);
    context.lineTo(366, 260);
    context.stroke();
    context.fillStyle = 'gray';
    context.fill();


    //小口袋，我先懒的弄


    //鞋子
    context.beginPath();
    context.moveTo(265, 450);
    context.bezierCurveTo(265, 460, 280, 450, 280, 470);
    context.lineTo(220, 470);
    context.lineTo(220, 450);
    context.stroke();
    context.fillStyle = 'black';
    context.fill();

    context.beginPath();
    context.moveTo(155, 450);
    context.bezierCurveTo(155, 460, 140, 450, 140, 470);
    context.lineTo(200, 470);
    context.lineTo(200, 450);
    context.stroke();
    context.fill();
}



function TestTwo() {
    var canvas = document.getElementById("test2");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");


        //矩形1
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect(510, 510, 55, 50);
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect(530, 530, 55, 50);

        //矩形2
        ctx.globalCompositeOperation = "xor";

        ctx.fillStyle = "blue";
        ctx.fillRect(100, 100, 50, 50);

        ctx.fillStyle = "red";
        ctx.fillRect(120, 120, 50, 50);
    }
}



function TestThree() {
    var ctx = document.getElementById('test3').getContext('2d');

    for (var i = 0; i < 6; i++) {

        for (var j = 0; j < 6; j++) {
            ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
                Math.floor(255 - 42.5 * j) + ')';
            ctx.beginPath();
            ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
            ctx.stroke();
        }

    }

}



function TestFour() {
    const canvas = document.getElementById('test4');

    const ctx = canvas.getContext('2d');
    ctx.font = '16px sans-serif';
    ctx.textAlign = 'center';

    const img = new Image();
    img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png';
    img.onload = function () {
        const w = img.width,
              h = img.height;

        ctx.fillText('Source', w * .5, 20);
        ctx.drawImage(img, 0, 24, w, h);

        ctx.fillText('Smoothing = TRUE', w * 2.5, 20);
        ctx.imageSmoothingEnabled = true;
        ctx.drawImage(img, w, 24, w * 3, h * 3);

        ctx.fillText('Smoothing = FALSE', w * 5.5, 20);
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(img, w * 4, 24, w * 3, h * 3);

    };

}